<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery.layout</title>
<link rel="stylesheet" type="text/css" href="../themes/default/xui.css" />
<link rel="stylesheet" type="text/css" href="../themes/icon.css" />
<style>
	html,body {
		height: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
 
 	.nav {
 		margin-bottom: 20px;
		margin-left: 0;
		list-style: none;
		padding-right: 15px;
		padding-left: 15px;
		margin-bottom: 0;
 	}
 	
 	.nav > li {
 		line-height: 20px;
 	}
 	
 	.nav > li > a {
 		display: block;
 		color: #0088cc;
 		text-decoration: none;
		margin-right: -15px;
  		margin-left: -15px;
  		padding: 3px 15px;
 	}
 	
 	.nav > li > a:hover,
	.nav > li > a:focus {
		background-color: #eeeeee;
	}
	
	.icon-chevron-right {
		display: inline-block;
		width: 14px;
		height: 14px;
		margin-top: 1px;
		*margin-right: .3em;
		line-height: 14px;
		vertical-align: text-top;
		opacity: 0.25;
	}
</style>	
<script type="text/javascript" src="../jquery-1.10.2.js">
</script>
<script type="text/javascript" src="../src/jquery.parser.js">
</script>

</head>
<body>
<div style="padding:0;">
  <div id="header" style="height:40px; background-color:#cde3f0;">
    头部
  </div>    	
  <div style="background-color: #ffffff;">
    <div id="nav" style="float:left; overflow:auto; min-width:200px; padding-top:5px; margin-right:5px; border:1px solid #95b8e7; border-left: 0px;">
      <!--Sidebar content-->
    </div>
    <div id="main" style="float:left; border:1px solid #95b8e7; border-right: 0px;">
      <!--Body content-->
      <iframe scrolling="auto" frameborder="0" src="javascript:void(0)" style="overflow:auto; width:100%; height: 100%;"></iframe>
    </div>
    <div style="clear:both;"></div>
  </div>
  
  <div id="footer" style="height:30px; background-color:#cde3f0; text-align:center;">
    <div style="padding:4px;">xx公司</div>
  </div>
</div>
<script>
	var treeData = [{    
		    "id":1,    
		    "text":"Folder1",    
		    "iconCls":"icon-save",    
		    "children":[{    
		        "text":"File1",    
		        "checked":true,
		        "attributes":{    
		            "url":"http://www.baidu.com"
		        }, 
		    },{    
		        "text":"Books",    
		        "state":"open",    
		        "children":[{    
		            "text":"PhotoShop",    
		            "checked":true   
		        },{    
		            "id": 8,    
		            "text":"Sub Bookds",    
		            "state":"closed"   
		        }]    
		    }]    
		},{    
		    "text":"Languages",    
		    "state":"closed",    
		    "children":[{    
		        "text":"Java"   
		    },{    
		        "text":"C#"   
		    }]    
		}]; 
		
	function genNav(rows) {
		var i, row, text, url;
		
		var ul = ['<ul class="nav nav-list">'];
		for(i = 0; i < rows.length; i++) {
			row = rows[i];
			text = row.text;
			url = row.attributes ? row.attributes.url : 'javascript:void(0)';
			
			if(row.children) {
				ul.push('<li><a href="javascript:void(0)"><i class="icon-chevron-right"></i>'+text+'</a>');
				ul = ul.concat(genNav(row.children));
			} else {
				ul.push('<li><a href="'+url+'">'+text+'</a>');
			}
			
			ul.push('</li>');
		}
		ul.push('</ul>');
		
		return ul;
	}	
	
	
	function layout() {
		var height = $('body').height()-$('#header').outerHeight(true)-$('#footer').outerHeight(true);
		var width = $('body').width()-$('#nav').outerWidth(true);
		
		$('#nav,#main')._outerHeight(height);
		$('#main')._outerWidth(width);
	}
	
	$(function() {
		$(window).resize(layout);
		
		layout();
		
		var nav = genNav(treeData).join('');
		console.log(nav);
		$('#nav').html(nav);
	});
</script>
</body>
</html>